<template>
    <div>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media">
                <router-link to="/song-list">
                    <span class="mui-icon-extra mui-icon-extra-custom"></span>
                    <div class="mui-media-body">歌单</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media">
                <router-link to="/">
                    <span class="mui-icon-extra mui-icon-extra-find"></span>
                    <div to="" class="mui-media-body">电台</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media">
                <router-link to="/">
                    <span class="mui-icon-extra mui-icon-extra-rank"></span>
                    <div to="" class="mui-media-body">排行榜</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media">
                <router-link to="/singer-list">
                    <span class="mui-icon-extra mui-icon-extra-peoples"></span>
                    <div class="mui-media-body">歌手</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media">
                <router-link to="/">
                    <span class="mui-icon-extra mui-icon-extra-notice"></span>
                    <div class="mui-media-body">视频彩铃</div>
                </router-link>
            </li>    </ul>
    </div>
</template>

<script>
    export default {
        name: "TableView",
        data() {
            return {};
        },
        created() {},
        mounted() {},
        methods: {},
    }
</script>

<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    li {
        display: inline;
    }

    .mui-grid-view.mui-grid-9 {
    // 九宫格背景
    background-color: #fff;
        border: none;
    // 九宫格按钮左右两端对齐
    display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .mui-grid-view.mui-grid-9::after {
    // 不加这个属性无法实现两端对齐
    display: none;
    }

    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        margin: 0;
        padding: .5em .5em;
        border: none;
    }

    .mui-icon-extra {
    // 九宫格图标颜色
    color: #26a2ff;
    }

    li.mui-table-view-cell {
    // 每个按钮分配空间相同
    width: 5.25em;
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
        font-size: 0.75em;
        text-overflow: clip;
    }
</style>
